<!DOCTYPE html>
<html>
<head>
    <title>Curve Closest Point</title>

	<script src="js/verb.min.js"></script>
	<script src="js/three.min.js"></script>
	<script src="js/verbToThreeConversion.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/codemirror.js"></script>
    <script src="js/javascript.js"></script>
    <script src="js/threeBasic.js"></script>

    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="css/codemirror.css">
    <link rel="stylesheet" href="css/example.css">
    <link rel="stylesheet" href="css/colorforth.css">
</head>
<body>

    <div id="button">Show/Hide Code</div>
    <div id="viewer" class="col">
        <div id="title"></div>
    </div>
    <div id="code-container" class="col scroll-y"></div>

</body>

<script id="script">
setupScene();

var p1 = [0,0,-5], p2 = [10,0,0], p3 = [10,10,-5], p4 = [0,10,5], p5 = [5, 5, 0];
var pts = [p1, p2, p3, p4, p5];
var interpCurve = verb.geom.NurbsCurve.byPoints( pts, 3 );

addCurveToScene( interpCurve.toThreeGeometry() );

var lineMat = new THREE.LineBasicMaterial({ linewidth: 1, color: 0xaaaaaa});

var d1 = Date.now();

var pts = [];
var w = 0;
for (var i = -10; i < 20; i+=4){
    for (var j = -10; j < 20; j+=4){
        for (var k = -10; k < 20; k+=4){

            var p0 = [i, j, k ];

            pts.push(p0);
            var p = interpCurve.closestPoint( p0 );

            var l = new verb.geom.Line(p, p0);
            addCurveToScene( l.toThreeGeometry(), lineMat );

            w++;
        }
    }
}

addPointsToScene( pts );

var d2 = Date.now();

console.log( (d2 - d1) / w, " ms per closest pt calculation" );

renderScene();
</script>

<script src="js/example.js"></script>

</html>